<!--
  功能：初始化功能描述
  作者：zichen-jiang
  邮箱：18307106535@163.com
  版本：v1.0.2
  修改内容：vue2.0初始化模板
  修改人员：zicheng-jiang
  修订时间：2020.10.01
  组件生成时间：2022年06月23日 09:49:41
-->
<template>
  <div class="imgClassAdmin">
    <a-button @click="visible = true" type="primary" icon="plus">新增分类</a-button>
    <a-table
      :columns="columns"
      :data-source="data"
      style="height: 100%"
      :rowKey="
        (record, index) => {
          return record.brNo + '-' + index;
        }
      "
      :loading="loading"
    >
      <span slot="action" slot-scope="text, record" class="actone">
        <a-popconfirm
          title="确定删除分类？"
          ok-text="确定"
          cancel-text="取消"
          @confirm="deleteclass(record)"
          @cancel="cancel"
        >
          <a-icon type="delete" title="删除" />
        </a-popconfirm>
      </span>
    </a-table>

    <a-modal title="新增" :visible="visible" @ok="handleOk" @cancel="handleCancel">
      <a-form-item label="分类名称">
        <a-input placeholder="请输入分类名称" v-model="valueName" />
      </a-form-item>
    </a-modal>
  </div>
</template>
<script>
//import(导入)其他文件（如：组件，工具js，第三方插件js，json文件，图片文件等）
import { requset } from "@/api";
export default {
  name: "imgClassAdmin",
  /**注册组件*/
  components: {},
  /**接受父组件传值*/
  props: {},
  data() {
    return {
      loading: false,
      visible: false,
      data: [],
      columns: [
        {
          title: "名称",
          dataIndex: "name",
          align: "center",
          key: "name",
        },

        {
          title: "ID",
          dataIndex: "id",
          align: "center",
          key: "id",
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      valueName: "",
    };
  },
  /**计算属性*/
  computed: {},
  /**监听data数据变化*/
  watch: {},
  /**创建组件时执行(有VM对象this)*/
  created() {},
  /**加载完组件时执行(主要预处理数据)*/
  mounted() {
    this.getimgtab();
  },
  /**所有方法*/
  methods: {
    cancel(e) {},
    handleOk() {
      requset("post", "/imageTab/create", { name: this.valueName }).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.valueName = "";
          this.visible = false;
          this.getimgtab();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    deleteclass(item) {
      requset("post", "/imageTab/deleteClass", { id: item.id }).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.getimgtab();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 查询tab列表
    getimgtab() {
      requset("get", "/imageTab/list", {}).then((res) => {
        if (res.data.code == 200) {
          this.data = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    handleCancel(e) {
      this.visible = false;
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.actone {
  color: #1890ff;
  font-size: 15px;
  cursor: pointer;
}
</style>
